<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style/font-awesome.min.css" />
    <link rel="stylesheet" href="./style/animate.css" />
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/classify.css" />
    <script src="./js/wow.min.js"></script>
    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize ='12px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            // Abort if browser does not support addEventListener
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
    <div class="container">
        <header class="header clear">
            <div class="back wow bounceInLeft" data-wow-duration="1s">Back</div>
            <h3 class="wow bounceInDown" data-wow-duration="1s">分类</h4>
            <div class="wow bounceInRight city" data-wow-duration="1s">
                广州市
            </div>
        </header>
        <div class="style">
            <div>
                <div class="wow flipInX" data-wow-duration="1s">
                    <a href="#"><img src="./images/style-img1.png" alt=""></a>
                    <span>美食</span>
                </div>
                <div class="wow flipInX" data-wow-duration="1s">
                    <a href="#"><img src="./images/style-img2.png" alt=""></a>
                    <span>电影</span>
                </div>
                <div class="wow flipInX" data-wow-duration="1s">
                    <a href="#"><img src="./images/style-img3.png" alt=""></a>
                    <span>运动</span>
                </div>
                <div class="wow flipInX" data-wow-duration="1s" >
                    <a href="#"><img src="./images/style-img4.png" alt=""></a>
                    <span>唱歌</span>
                </div>
            </div>
            <div>
                <span class="wow bounceInDown" data-wow-duration=".8s"></span>
                <span class="wow bounceInDown" data-wow-duration="1.2s" ></span>
                <span class="wow bounceInDown" data-wow-duration="1.4s" ></span>
                <span class="wow bounceInDown" data-wow-duration="1.6s" ></span>
            </div>
        </div>
        <div class="foot">
            <div class="clear "  >
                <div class="clear wow bounceInLeft" data-wow-duration="1s"><img src="./images/font-img1.png" alt=""><h4>美食类</h4></div>
                <a class="wow bounceInRight" data-wow-duration="1s" href="javascript:void(0)">更多<i class="fa fa-arrow-circle-right fa-lg"></i></a>
            </div>
            <div>
                <a href="#"><img class="wow flipInX" data-wow-duration="1s" src="./images/font-image1.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1s" src="./images/font-image2.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1s" src="./images/font-image3.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1s" src="./images/font-image4.png" alt=""></a>
            </div>
        </div>
        <div class="foot">
            <div class="clear">
                <div class="clear wow bounceInLeft" data-wow-duration="1s"><img src="./images/font-img2.png" alt=""><h4>运动类</h4></div>
                <a class="wow bounceInRight" data-wow-duration="1s" href="javascript:void(0)">更多<i class="fa fa-arrow-circle-right fa-lg"></i></a>
            </div>
            <div>
                <a href="#"><img class="wow flipInX" data-wow-duration="1.5s" src="./images/font-image5.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1.5s" src="./images/font-image6.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1.5s" src="./images/font-image7.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="1.5s" src="./images/font-image8.png" alt=""></a>
            </div>
        </div>
        <div class="foot">
            <div class="clear">
                <div class="clear wow bounceInLeft" data-wow-duration="1s"><img src="./images/font-img3.png" alt=""><h4>电影类</h4></div>
                <a class="wow bounceInRight" data-wow-duration="1s" href="javascript:void(0)">更多<i class="fa fa-arrow-circle-right fa-lg"></i></a>
            </div>
            <div>
                <a href="#"><img class="wow flipInX" data-wow-duration="2s" src="./images/font-image9.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="2s" src="./images/font-image10.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="2s" src="./images/font-image9.png" alt=""></a>
                <a href="#"><img class="wow flipInX" data-wow-duration="2s" src="./images/font-image10.png" alt=""></a>
            </div>
        </div>
        <footer class="wow rubberBand footer" data-wow-duration="1s">
            <a href="./index.html">
                <img src="./images/footer-img.png" />
                <span>首页</span>
            </a>
            <a href="./classify.html">
                <img src="./images/footer-img2-check.png" />
                <span>分类</span>
            </a>
            <a href="./discover.html">
                <img src="./images/footer-img3.png" />
                <span>发现</span>
            </a>
            <a href="./me.html">
                <img src="./images/footer-img4.png" />
                <span>我的</span>
            </a>
        </footer>
    </div>
</body>
</html>
<script>
        //初始化懒加载
        new WOW().init();
</script>